{% extends 'console.html' %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">任务名</label>
                            <div class="layui-input-inline">
                                <select id="comp_task_name" name="comp_task_name">
                                    <option value="">直接或搜索选择</option>
                                    <!-- 动态展示区域 -->
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">schema</label>
                            <div class="layui-input-inline">
                                <input type="text" id="schema" name="schema" placeholder="schema" class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="table_name" name="table_name" placeholder="表名"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">检查表</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name_check_result" name="table_name_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">表1</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name1" name="table_name1">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表2</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name2" name="table_name2">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表3</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name3" name="table_name3">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表4</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name4" name="table_name4">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表5</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name5" name="table_name5">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表6</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name6" name="table_name6">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表7</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name7" name="table_name7">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="formSubmit"
                                    id="btnSearch">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset"
                                    id="customReset">
                                <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-normal" id="exportAllBtn"
                                    lay-submit lay-filter="export">
                                <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">
                <table id="jobTableRepareTableId" lay-filter="jobTableRepareTableFilter"></table>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dcs/api/jobTableRepareGetTaskNames',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.comp_task_name + '">' + item.comp_task_name + '</option>';
                        });
                        $('#comp_task_name').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 初始化表格
            var tableDefinesLayuiTable = table.render({
                elem: '#jobTableRepareTableId',
                url: '/dcs/api/jobTableRepares',
                method: 'get',
                page: {
                    limit: 10, //每页显示条数
                    limits: [10, 20, 50, 100],
                    curr: 1, //起始页
                    groups: 5, //连续页码个数
                    prev: '上一页', //上一页文本
                    next: '下一页', //下一页文本
                    first: 1, //首页文本
                    //, last: 100                     //尾页文本
                    layout: ['prev', 'page', 'next',
                        'refresh', 'skip', 'count',
                        'limit']
                },
                cols: [
                    [ // 表头
                        // {type: 'checkbox', fixed: 'left'},
                        {
                            field: 'comp_task_name',
                            title: '比对任务名称',
                            width: 220,
                            align: 'left',
                            fixed: 'left',
                            sort: true
                        },
                        // source, schema, table_name, table_comment, column_num, column_name, data_type, data_default, nullable, pkey, column_commen
                        // creation_date
                        {field: 'schema', title: 'schema', width: 190, fixed: 'left', align: 'left'},
                        {field: 'table_name', title: '表名', width: 230, fixed: 'left', align: 'left'},
                        {field: 'table_name_check_result', title: '检查表', width: 80, fixed: 'left', align: 'center'},
                        {field: 'table_name1', title: '表1', width: 80, fixed: 'left', align: 'center'},
                        {field: 'table_name2', title: '表2', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source2',
                            title: '数据源2修复脚本',
                            width: 160,
                            templet: repareSource2Function,
                            align: 'left'
                        },
                        {field: 'table_name3', title: '表3', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source3',
                            title: '数据源3修复脚本',
                            width: 160,
                            templet: repareSource3Function,
                            align: 'left'
                        },
                        {field: 'table_name4', title: '表4', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source4',
                            title: '数据源4修复脚本',
                            width: 160,
                            templet: repareSource4Function,
                            align: 'left'
                        },
                        {field: 'table_name5', title: '表5', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source5',
                            title: '数据源5修复脚本',
                            width: 160,
                            templet: repareSource5Function,
                            align: 'left'
                        },
                        {field: 'table_name6', title: '表6', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source6',
                            title: '数据源6修复脚本',
                            width: 160,
                            templet: repareSource6Function,
                            align: 'left'
                        },
                        {field: 'table_name7', title: '表7', width: 80, align: 'center'},
                        {
                            field: 'compare_scripts_of_source7',
                            title: '数据源7修复脚本',
                            width: 160,
                            templet: repareSource7Function,
                            align: 'left'
                        },
                        {field: 'creation_date', title: '更新时间', width: 180, align: 'left'}
                        // ,{fixed: 'right', title: '操作', width: 150, toolbar: '#barOption'}
                    ]
                ],
                done: function (res) {
                    // layui table 单元格 添加底色。遍历表格中的每一行
                    $('.layui-table tbody tr').each(function () {
                        // 获取当前行的所有单元格
                        var $cells = $(this).children('td');
                        // 遍历每一个单元格
                        $cells.each(function () {
                            var $cell = $(this);
                            var value = $cell.text();
                            // 假设我们想为值大于10的单元格设置背景色
                            if (value === '√') {
                                // $cell.css('background-color', 'green');
                                $cell.addClass('check-ok');
                            } else if (value === '×') {
                                // $cell.css('background-color', 'red');
                                $cell.addClass('check-not-ok');
                            }
                        });
                    });
                }
            });
            // 初始化表格 - 结束

            // 绑定表单提交事件。点击搜索按钮，提交表单
            form.on('submit(formSubmit)', function (data) {
                tableDefinesLayuiTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 数据导出
            form.on('submit(export)', function (data) {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    layer.msg('正在生成文件...', {icon: 16, time: 1500});
                    // 创建隐藏的iframe实现下载
                    setTimeout(function () {
                        var comp_task_name2 = $('#comp_task_name').val();
                        var schema2 = $('#schema').val();
                        var table_name2 = $('#table_name').val();
                        var table_name_check_result2 = $('#table_name_check_result').val();
                        var table_name12 = $('#table_name1').val();
                        var table_name22 = $('#table_name2').val();
                        var table_name32 = $('#table_name3').val();
                        var table_name42 = $('#table_name4').val();
                        var table_name52 = $('#table_name5').val();
                        var table_name62 = $('#table_name6').val();
                        var table_name72 = $('#table_name7').val();

                        // 构建导出URL url: '/dcs/api/tableInfos?export=1',
                        var exportUrl = '/dcs/api/exportJobTableRepare?';

                        exportUrl += 'comp_task_name' + '=' + encodeURIComponent(comp_task_name2) + '&';
                        exportUrl += 'schema' + '=' + encodeURIComponent(schema2) + '&';
                        exportUrl += 'table_name' + '=' + encodeURIComponent(table_name2) + '&';
                        exportUrl += 'table_name_check_result' + '=' + encodeURIComponent(table_name_check_result2) + '&';
                        exportUrl += 'table_name1' + '=' + encodeURIComponent(table_name12) + '&';
                        exportUrl += 'table_name2' + '=' + encodeURIComponent(table_name22) + '&';
                        exportUrl += 'table_name3' + '=' + encodeURIComponent(table_name32) + '&';
                        exportUrl += 'table_name4' + '=' + encodeURIComponent(table_name42) + '&';
                        exportUrl += 'table_name5' + '=' + encodeURIComponent(table_name52) + '&';
                        exportUrl += 'table_name6' + '=' + encodeURIComponent(table_name62) + '&';
                        exportUrl += 'table_name7' + '=' + encodeURIComponent(table_name72) + '&';

                        var iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        iframe.src = exportUrl;
                        document.body.appendChild(iframe);

                        // 下载完成后移除iframe
                        setTimeout(function () {
                            document.body.removeChild(iframe);
                            layer.msg('导出成功！');
                        }, 2000);
                    }, 1500);
                });
                return false;
            });

            function repareSource2Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source2) {
                    str_tmp = d.compare_scripts_of_source2
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource2Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            function repareSource3Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source3) {
                    str_tmp = d.compare_scripts_of_source3
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource3Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            function repareSource4Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source4) {
                    str_tmp = d.compare_scripts_of_source4
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource4Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            function repareSource5Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source5) {
                    str_tmp = d.compare_scripts_of_source5
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource5Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            function repareSource6Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source6) {
                    str_tmp = d.compare_scripts_of_source6
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource6Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            function repareSource7Function(d) {
                str_tmp = "";
                if (d.compare_scripts_of_source7) {
                    str_tmp = d.compare_scripts_of_source7
                } else {
                    str_tmp = ""
                }
                var html = '<div><a rel="nofollow" style="color:#1E9FFF" href="javascript:void(0);" ' +
                    'lay-event="repareSource7Event">'
                    + str_tmp + '</a></div>';
                return html
            }

            // 监听 layui event 事件
            table.on('tool(jobTableRepareTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'repareSource2Event') {
                    repare_Source2_layer_f(data);
                } else if (obj.event === 'repareSource3Event') {
                    repare_Source3_layer_f(data);
                } else if (obj.event === 'repareSource4Event') {
                    repare_Source4_layer_f(data);
                } else if (obj.event === 'repareSource5Event') {
                    repare_Source5_layer_f(data);
                } else if (obj.event === 'repareSource6Event') {
                    repare_Source6_layer_f(data);
                } else if (obj.event === 'repareSource7Event') {
                    repare_Source7_layer_f(data);
                }
            });

            // 查看数据详情
            function repare_Source2_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源2 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView2?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

            function repare_Source3_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源3 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView3?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

            function repare_Source4_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源4 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView4?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

            function repare_Source5_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源5 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView5?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

            function repare_Source6_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源6 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView6?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

            function repare_Source7_layer_f(data) {
                var title = '查看详情';
                var index = layer.open({
                    type: 2,
                    offset: 'auto',
                    title: title + ' - ' + data.comp_task_name + ' - ' + data.schema + '.' + data.table_name + ' ，数据源7 的 修复脚本',
                    skin: 'layui-layer-rim', //加上边框
                    shadeClose: true,
                    chade: false,
                    maxmin: true,
                    area: ['70%', '80%'], //宽高
                    content: '/dcs/jobTableRepareCodeView7?id=' + data.job_table_repare_id
                });
                // 关闭窗口按钮
                $('#closeWindowsBtn').click(function () {
                    layer.close(index); // 关闭加载层
                });
            }

        });
    </script>
{% endblock %}

